<script lang='ts'>
import { defineComponent, PropType, reactive, ref, watch, onMounted, getCurrentInstance } from 'vue'
import { VmsPageTableColumn } from './interface'
import { tableHeightFit } from './util'
import emptyImg from '/@/assets/img/emptyStatus.png'
export default defineComponent({
    name: "JxtechBaseTable"
})
</script>

<script lang="ts" setup>
const props = defineProps({
    /**
    * 表格数据 静态数据
    */
    tableData: Array as PropType<any[]>,
    //加载数据
    loadData: {
        type: Function,
        required: true
    },

    /**
 * 设置表格大小
 */
    size: {
        type: String,
        default: "small"
    },
    // row类名
    tableRowClassName: {
        type: String
    },
    /**
  * 默认排序
  */
    defaultSort: Object,
    /**
  * 列配置
  */
    tableColumn: {
        type: Array as PropType<VmsPageTableColumn[]>,
        required: true
    },
    // 边框
    border: {
        type: Boolean,
        default: true
    },
    //斑马纹
    stripe: {
        type: Boolean,
        default: true
    },
    // 表格的高度适配方式 auto full height
    fit: {
        type: String,
        default: 'auto'
    },
    // 表格高度
    tableHeight: {
        type: [String, Number],
        default: 'auto'
    },
})
const jxtechBaseTableWrapperRef = ref()
const JxtechBaseTableHeaderRef = ref()
const JxtechBaseTableRef = ref()
const JxtechBaseTableState = reactive({
    tableData: props.tableData,
    loading: false,
    // 数据条数
    total: 0,
    tableColumn: props.tableColumn,
    /**
   * 当列渲染成链接时 点击触发linkClick事件
   */
    linkClick: (row: any, column: VmsPageTableColumn) => {
        if (column.linkClick) column.linkClick(row, column)
    },
    // onExportButtonClick: (type: string) => {
    //     baseTableExpose.expData(type)
    // },
})
/**
 * 一些工具方法
 */
const baseTableExpose: PageTableExpose = {
    /**
    * 加载表格
    */
    loadTable: () => {
        JxtechBaseTableState.loading = true
        props.loadData().then(
            (res: any) => {
                JxtechBaseTableState.tableData = res.data
                JxtechBaseTableState.total = res.data.length
            }
        ).catch((err: any) => {
            console.log('base-table', err)
        }).finally(() => {
            JxtechBaseTableState.loading = false
        })
    },
    /**
    * 重载表格
    */
    reloadTable: () => {
        baseTableExpose.clearSelection()
        baseTableExpose.clearSort()
        baseTableExpose.clearFilter()
        baseTableExpose.loadTable()
    },
    /**
     * 导出文件
     */
    expData: (expType?: string) => {
    },
    /**
    * 获取选择的数据
    */
    getSelectionData: () => {
        // return JxtechBaseTableState.selectionData
    },
    /**
     * 获取选中的数据的主键集合
     */
    getSelectionPkList: () => {
        // return JxtechBaseTableState.selectionPkList
    },
    /**
    * 清理选择的数据
    */
    clearSelection: () => {
        // JxtechBaseTableRef.value.clearSelection()
    },
    /**
    * 清理排序
    */
    clearSort: () => {
        // JxtechBaseTableRef.value.clearSort()
        //清理sortInfo
        // JxtechBaseTableState.sortInfo = { property: null, direction: null }
    },
    /**
    * 清理筛选
    * @param filters 需要清理列筛选的prop数组 不穿 则清理所有
    */
    clearFilter: (columnKeyArray?: Array<string>) => {
        // if (columnKeyArray && columnKeyArray.length > 0) {
        //     columnKeyArray.forEach(columnKey => {
        //         JxtechBaseTableRef.value.clearFilter(columnKey)
        //         //清理的同时我们需要把对应的filterInfo中保存的值清理掉
        //         JxtechBaseTableState.filterInfo[columnKey] = []
        //     })
        // } else {
        //     JxtechBaseTableRef.value.clearFilter()
        //     for (let key in JxtechBaseTableState.filterInfo) {
        //         JxtechBaseTableState.filterInfo[key] = []
        //     }
        // }
    }
}
watch(() => props.tableData, val => {
    JxtechBaseTableState.tableData = val
})
const slots = getCurrentInstance()?.slots

//表格高度是否自适应

// //适配表格高度
onMounted(() => {

    tableHeightFit(JxtechBaseTableRef.value, jxtechBaseTableWrapperRef.value, null, props.fit, props.tableHeight)
})
//对外展开那些属性
defineExpose({
    ...baseTableExpose
})

</script>

<template>
    <div class="jxtech-base-table-container">
        <!-- page-table-header-start -->
        <div
            class="jxtech-base-table-header"
            ref="JxtechBaseTableHeaderRef"
            :class="slots?.header ? '' : 'header-hidden'"
        >
            <slot name="header"></slot>
        </div>
        <!-- page-table-header-end -->
        <div class="jxtech-base-table-wrapper" ref="jxtechBaseTableWrapperRef">
            <el-table
                v-loading="JxtechBaseTableState.loading"
                :data="JxtechBaseTableState.tableData"
                element-loading-text="拼命加载中..."
                :size="size"
                :border="border"
                :stripe="stripe"
                :default-sort="defaultSort"
                :highlight-current-row="true"
                :row-class-name="tableRowClassName"
                tooltip-effect="light"
                ref="JxtechBaseTableRef"
            >
                <template v-for="(column,index) in tableColumn">
                    <!-- 序号 -->
                    <el-table-column
                        v-if="column.type === 'index'"
                        :index="index + 1"
                        :type="column.type"
                        :label="column.label"
                        :width="column.width"
                        :align="column.align || 'center'"
                    ></el-table-column>

                    <!-- 选择列 -->
                    <el-table-column
                        v-else-if="column.type === 'selection'"
                        :type="column.type"
                        :label="column.label"
                        :width="column.width"
                        :align="column.align || 'center'"
                    ></el-table-column>
                    <template v-else>
                        <el-table-column
                            :prop="column.prop"
                            :label="column.label"
                            :width="column.width"
                            :align="column.align || 'center'"
                            :columnKey="column.columnKey"
                            :filters="column.filter?.filters"
                            :filter-placement="column.filter?.filterPlacement || 'bottom-start'"
                            :filter-multiple="column.filter?.filterMultiple"
                            :filtered-value="column.filter?.filteredValue"
                            :show-overflow-tooltip="column.showOverflowTooltip"
                        >
                            <!-- :sortable="column.sort?.sortable" -->
                            <template #default="scope">
                                <!-- 渲染链接 -->
                                <span
                                    class="column-link"
                                    v-if="column.type === 'link' && column.prop"
                                    @click.stop.prevent="JxtechBaseTableState.linkClick(scope.row, column)"
                                >{{ scope.row[column.prop] }}</span>

                                <!-- 渲染默认数据 -->
                                <span
                                    v-else-if="!column.slot && column.prop"
                                >{{ scope.row[column.prop] }}</span>
                                <!-- 渲染插槽 -->
                                <slot v-else :name="column.slot" :row="scope.row">{{ column.slot }}</slot>
                            </template>
                        </el-table-column>
                    </template>
                </template>
                <template #empty>
                    <el-empty :image-size="240" :image="emptyImg" description="还没有数据录入哦！"></el-empty>
                </template>
            </el-table>
        </div>
        <!-- page-table-footer-start -->
        <!-- <div class="jxtech-base-table-footer" ref="jxtechTableFooterRef">
            <div class="jxtech-footer-download-icon">
                <span title="CSV下载" @click="JxtechBaseTableState.onExportButtonClick('csv')">
                    <jxtech-svg-icon icon="#icon-CSV" :size="22" />
                </span>
                <span title="PDF下载" @click="JxtechBaseTableState.onExportButtonClick('pdf')">
                    <jxtech-svg-icon icon="#icon-PDF" :size="22" />
                </span>

                <span title="EXCEL下载" @click="JxtechBaseTableState.onExportButtonClick('excel')">
                    <jxtech-svg-icon icon="#icon-ECEL" :size="22" />
                </span>
            </div>
        </div>-->
        <!-- page-table-footer-end-->
    </div>
</template>

<style lang="scss" scoped>
// ::v-deep(.el-table) {
//     .el-loading-spinner {
//         background: url("/@/assets/img/loading.svg") no-repeat center;
//         background-size: 200px 120px;
//         height: 100%;
//         top: 50px;
//     }
//     .circular {
//         display: none;
//     }
//     .el-loading-spinner .el-loading-text {
//         margin-top: 130px;
//     }
//     .el-loading-text {
//         color: #eee;
//         transition: all 0.2s;
//     }
// }
.column-link {
    color: #0e6fb7;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}
.header-hidden {
    display: none;
}

::v-deep(.el-table th.el-table__cell > .cell.highlight) {
    color: orange;
}
.jxtech-base-table-container {
    min-height: 200px;
    border-radius: 8px;
    // overflow: hidden;
    box-shadow: 0 4px 4px rgba(65, 97, 133, 0.6);
    border: 1px solid #e4e7ed;
    background-color: #fff;
}
.jxtech-base-table-header {
    background-color: #fff;
    padding: 10px 20px;
    vertical-align: center;
    border-bottom: 2px solid #eaf2f8;
    border-radius: 8px 8px 0 0;
}
::v-deep(.el-table th.el-table__cell) {
    background-color: #0e6fb7;
    color: #fff;
}

.el-card__body {
    padding-top: 0;
}

::v-deep(.el-card__body) {
    padding: 16px;
}
::v-deep(.el-pagination) {
    padding: 10px;
}
.jxtech-base-table-wrapper {
    position: relative;
    background-color: #fff;
    padding-top: 20px;
    ::v-deep(.el-table) {
        width: calc(100% - 40px);
        margin: 0 20px 20px;
        height: calc(100% - 50px);
        tr {
            height: 30px;
            line-height: 30px;
            th {
                letter-spacing: 0.1em;
                border-top: 1px solid #eaf1f9;
            }
        }
    }

    ::v-deep(.el-table__body-wrapper) {
        overflow-y: auto;
        height: calc(100% - 40px) !important;
    }
    ::v-deep(.el-link--inner) {
        color: #0e6fb7;
        &:hover {
            color: #409eff;
        }
    }
    ::v-deep(tr.el-table__row--striped td.el-table__cell) {
        background-color: #f3f8fb;
    }
    ::v-deep(.el-table--border .el-table__cell) {
        border-color: #d9e5f5;
    }
    ::v-deep(.el-table--border) {
        border: unset;
    }
}
// 表格行hover效果
::v-deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: #dbe9f4;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    content: unset;
}

::v-deep(.el-table__row td:nth-last-child(1)) {
    border-right: unset;
}

//2021/1/10 更新element-plus 1.3.3.beta
::v-deep(.el-table__inner-wrapper) {
    height: 100%;
}
</style>